<template>
	<view class="my-path-list">
		<view class="path-list">
			
			<view class=""
			v-for="(item, index) in list"
			:key="index"
			@tap="toAddPath(index)"
			>
				<view class="path-item" @tap="goConfirmOrder(item)">
					<view class="item-main">
						<view class="item-name">{{item.name}}</view>
						<view class="">{{item.tel}}</view>
					</view>
					<view class="item-main">
						<view class="active" v-if="item.isDefault == 1">默认</view>
						<view class="">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="add-path">
			<view class="add-path-btn" @tap="goAddPath">新增地址</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				isSelectedPath: false
			}
		},
		computed: {
			...mapState({
				list:state => state.path.list
			})
		},
		onLoad(e) {
			if(e.type === 'selectedPath') {
				this.isSelectedPath = true;
			}
			// 初始化拿到收货地址数据
			this.__initAddress();
		},
		methods: {
			...mapMutations(['__initAddressList']),
			// 初始化请求收货地址接口
			__initAddress(){
				$http.request({
				  url: "/selectAddress",
				  method:"POST",
				  header:{
					  token:true
				  }
				}).then((res) => {
					this.__initAddressList(res);
				}).catch(() => {
				  uni.showToast({
				    title: '请求失败···',
				    icon: 'none'
				  })
				})
			},
			// 修改
			toAddPath(index) {
				let pathObj = JSON.stringify({
					index:index,
					item:this.list[index]
				});
				uni.navigateTo({
					url:"../my-add-path/my-add-path?data="+pathObj+""
				})
			},
			// 新增
			goAddPath() {
				uni.navigateTo({
					url:"../my-add-path/my-add-path"
				})
			},
			// 返回确认订单页面
			goConfirmOrder(item) {
				// 如果是从确认订单过来的执行以下代码
				if(this.isSelectedPath) {
					// selectPathItem 自定义事件， 页面通讯
					uni.$emit('selectPathItem', item);
					// 返回上一页
					uni.navigateBack({
						delta:1
					})
				}
			}
		}
	}
</script>

<style scoped>
.path-list {
	padding-left: 20rpx;
}
.path-item {
	padding: 10rpx;
	border-bottom: 1rpx solid #f3f3f3;
}
.item-main {
	display: flex;
	align-items: center;
}
.item-name {
	padding-right: 10rpx;
}
.active {
	padding-right: 10rpx;
	padding: 2rpx 16rpx;
	background-color: #ff115c;
	color: #FFFFFF;
	border-radius: 26rpx;
	font-size: 24rpx;
	text-align: center;
	margin-right: 16rpx;
}
.add-path {
	padding: 20rpx 0;
	width: 100%;
	display: flex;
	justify-content: center;
}
.add-path-btn {
	border: 1px solid #ff115c;
	color: #808080;
	border-radius: 36rpx;
	padding:  10rpx 70rpx;
}
.item-right {
	padding-left: 16rpx;
}
</style>
